<template>
  <div
    style="border-bottom: 1px solid #eee"
    class="w-full h-full flex items-center justify-between pr-[20px]"
  >
    <div class="flex">
      <div
        v-for="(item, index) in topTags.topTagsList"
        :key="index"
        @click="togglePage(item)"
      >
        <div class="bg-[#eee] mr-[8px] p-[6px] flex justify-between">
          <div
            :class="
              route.path == item.path ? 'text-[#1353C9]' : 'text-[#63656D]'
            "
          >
            {{ item.name }}
          </div>
          <i
            class="iconfont icon-guanbi"
            :class="
              route.path == item.path ? 'text-[#1353C9]' : 'text-[#63656D]'
            "
            @click="closetag(item)"
          >
          </i>
        </div>
      </div>
    </div>

    <el-dropdown>
      <i class="iconfont icon-yonghu-yuan" style="font-size: 24px"></i>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click="showeditpassword"
            >修改密码</el-dropdown-item
          >
          <el-dropdown-item
            ><router-link to="/login" @click="out"
              >退出登录</router-link
            ></el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <EditPwd
      @close="showeditpwd = false"
      v-if="showeditpwd"
      v-model:visible="showeditpwd"
    ></EditPwd>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import EditPwd from "./editpwd.vue";
import { topnavStore } from "@/store/topnav/index";
const topTags = topnavStore();
const showeditpwd = ref(false);
const route = useRoute();
const router = useRouter();
const topTagsList = computed(() => {
  return topTags.topTagsList;
});

const out = () => {
  localStorage.removeItem("token");
};
const showeditpassword = () => {
  console.log("888");
  showeditpwd.value = true;
};

const togglePage = (item: any) => {
  router.replace({ path: item.path, query: item.query });
};

const closetag = (item: { path: string }) => {
  topTags.delList(item.path);
};
topTags.getList();
const watchClose = watch(
  () => route.fullPath,
  (v1) => {
    if (v1) {
      console.log(route.fullPath, "route.fullPath");
      topTags.addList({
        name: route.meta.title as string,
        path: route.path,
        query: route.query,
      });
      console.log(topTags.topTagsList, "topTags.topTagsList");
    }
  },
  { immediate: true }
);

onBeforeUnmount(() => {
  watchClose;
});
</script>

<style scoped></style>
